<template>
	<view class="register">
		<view class="person-tab">
			<view class="left" @click="pageBack">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="title">
				注册
			</view>
			<view class="right">

			</view>
		</view>
		<view class="register-box">
			<view class="register-title">
				<image src="../../static/register.svg" mode=""></image>
			</view>
			<view class="username">
				<view class="">
					<image src="../../static/account.png" mode=""></image>
				</view>
				<input type="text" v-model.trim="username" placeholder="请输入用户名">
			</view>
			<view class="account">
				<view class="">
					<image src="../../static/account.png" mode=""></image>
				</view>
				<input type="text" v-model.trim="account" placeholder="请输入账号">
			</view>
			<view class="password">
				<view class="">
					<image src="../../static/password.png" mode=""></image>
				</view>
				<input maxlength="16" type="password" v-model.trim="password" placeholder="请输入密码">
			</view>
			<view class="skip">
				<span @click="switchRegistr">已有账号?去登录</span>
			</view>
			<view class="but" @click="register">注册</view>
		</view>

	</view>
</template>

<script>
	import tools from "../../static/js/tool.js"
	export default {
		data() {
			return {
				username: "",
				account: "",
				password: "",
				arr: ["../../static/tou/1.jpg", "../../static/tou/2.jpg", "../../static/tou/3.jpg",
					"../../static/tou/4.jpg"
				]
			}
		},
		methods: {
			pageBack() {
				// uni.navigateBack({
				// 	delta: 1,
				// })
				uni.navigateTo({
					url:"../login/login"
				})
			},
			switchRegistr() {
				uni.redirectTo({
					url: "../login/login"
				})
			},
			register() {
				let user_img = this.arr[Math.floor(Math.random() * 4)]
				if (this.username.length != 0 && this.account.length != 0 && this.password.length != 0) {
					let reg =
						/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,}$/
					if (this.account.length < 8) {
						uni.showToast({
							title: "账号至少8位",
							icon: 'error'
						})
					} else {
						if (reg.test(this.password)) {
							let username = this.username
							let account = this.account
							let password = this.password
							console.log(username, account, password);
							uniCloud.callFunction({
								name: "where_user",
								data: {
									account,
								},
								success: res => {
									if (res.result.data.length > 0) {
										console.log("账号已存在");
										uni.showToast({
											title: "账号已存在",
											icon: "error",
											duration: 1000
										})
									} else {
										uniCloud.callFunction({
											name: "add_user",
											data: {
												username,
												account,
												password: tools.setAES(password),
												user_img,
												user_sex: "保密",
												user_sign: "这个人很懒,什么都没留下"
											},
											success: res => {
												console.log(res);
												uni.showToast({
													title: "注册成功",
													icon: "success"
												})
												uni.navigateTo({
													url: "../login/login"
												})
											}
										})
									}
								}
							})

						} else {
							uni.showToast({
								title: "密码至少8位且需包含大小写字母、特殊字符其中两种",
								icon: 'none'
							})
							this.password = ""
						}
					}
				} else {
					uni.showToast({
						title: "内容不能为空!",
						duration: 1000,
						icon: 'none'
					})
				}



			}
		}
	}
</script>

<style lang="scss">
	.register-title{
		display: flex;
		box-sizing: border-box;
		position: fixed;
		top: 50px;
		padding-left: 50%;
		transform: translateX(-31%);
		image{
			    width: 243px;
			    height: 187px;
		}
	}
	.person-tab {
		height: 80rpx;
		box-shadow: 0px 0px 3px -2px black;
		display: flex;
		color: black;

		.left {
			width: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;

		}

		.title {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.right {
			width: 76rpx;
		}
	}

	.register {
		.register-box {
			box-sizing: border-box;
			padding: 20px;
		}

		box-sizing: border-box;

		input {
			padding-left: 10px;
		}

		.username {
			border-bottom: 1px solid #ccc;
			margin: 55% 0 10px 0;
			padding-bottom: 10px;
			display: flex;
			align-items: center;

			image {
				width: 22px;
				height: 22px;
			}
		}

		.account {
			border-bottom: 1px solid #ccc;
			margin: 10px 0;
			padding-bottom: 10px;
			display: flex;
			align-items: center;

			image {
				width: 22px;
				height: 22px;
			}
		}

		.password {
			border-bottom: 1px solid #ccc;
			margin: 10px 0;
			padding-bottom: 10px;
			display: flex;
			align-items: center;

			image {
				width: 22px;
				height: 22px;
			}
		}

		.skip {
			display: flex;
			justify-content: end;
			margin: 12px 0;
			color: #bebebe;
		}

		.but {
			width: 60%;
			height: 50px;
			border-radius: 12px;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			// background-color: #ccc;
			background-color: #ffa275;
			margin: 0 auto;
		}
	}
</style>